<template>
    <div class="hotel_item">
        <!-- 酒店图片 -->
        <div class="hotel_item_img">
            <nuxt-link :to="detailUrl">
                <img
                    :src="hotel.photos"
                    alt=""
                >
            </nuxt-link>
        </div>

        <!-- 酒店信息 -->
        <div class="hotel_item_info">
            <h4>
                <nuxt-link :to="detailUrl">
                    {{hotel.name}}
                </nuxt-link>
            </h4>
            <div class="hotel_item_info_name_en">
                <span>{{hotel.alias}}</span>
                <span><i
                        v-for="(v,i) of hotel.hotellevel&&hotel.hotellevel.level"
                        :key="v.id || i"
                        class="iconfont iconhuangguan orange"
                    ></i></span>
                <span>{{hotel.hoteltype.name}}</span>
            </div>
            <div class="hotel_item_info_evaluate">
                <div class="flex5">
                    <el-rate
                        v-model="hotel.stars"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value}分"
                    >
                    </el-rate>
                </div>
                <div class="flex3"><span class="orange">{{hotel.all_remarks}}</span> 条评价</div>
                <div class="flex3"><span class="orange">35</span> 篇游记</div>
            </div>
            <div class="hotel_item_info_address">
                <i class="iconfont iconlocation"></i>
                {{hotel.address}}
            </div>
        </div>

        <!-- 酒店价格 -->
        <div class="hotel_item_price">
            <a
                href="#"
                v-for="(v,i) of hotel.products"
                :key="v.id || i"
            >
                <div class="hotel_item_price_row">
                    <div class="app">{{v.name}}</div>
                    <div class="price">
                        <span class="orange">￥{{v.price}}</span>起
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </div>
            </a>
        </div>

    </div>
</template>

<script>

export default {
    components: {},
    props: {
        hotel: Object
    },
    data() { return {}; },
    computed: {
        //详情页跳转路径
        detailUrl() {
            return `/hotel/${this.hotel.id}`;
        },
    },
    methods: {},
}
</script>

<style lang="less" scoped>
.hotel_item {
    display: flex;
    justify-content: space-between;
    padding: 25px 0;
    border-bottom: 1px solid #ccc;

    .orange {
        color: orange;
    }

    .hotel_item_img {
        img {
            display: block;
            width: 320px;
            height: 210px;
        }
    }

    .hotel_item_info {
        width: 425px;
        margin: 0 20px;

        h4 {
            font-size: 24px;
            font-weight: 400;
        }

        .hotel_item_info_name_en {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 10px;

            span {
                color: #999;
                margin-right: 10px;
            }
        }

        .hotel_item_info_evaluate {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;

            .flex5 {
                flex: 5;
                display: flex;
                align-items: center;

                .el-rate__icon {
                    color: #eff2f7;
                    .el-rate__decimal {
                        color: #f7ba2a;
                    }
                }

                span {
                    font-size: 14px;
                }
            }

            .flex3 {
                flex: 3;
            }
        }

        .hotel_item_info_address {
            color: #666;
            font-size: 14px;
        }
    }

    .hotel_item_price {
        flex: 1;
        margin-top: 20px;

        .hotel_item_price_row {
            display: flex;
            justify-content: space-between;
            padding: 15px 25px 15px 10px;
            font-size: 14px;
            border-bottom: 1px solid #ccc;
            .el-icon-arrow-right {
                margin-left: 3px;
            }
        }

        a:hover .hotel_item_price_row {
            background: #f5f7fa;
        }
    }
}
</style>